<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .finished{
            color: red;
            text-decoration: line-through;
        }
        li{
            cursor: pointer;
        }
        .btnTrue{
            color: red;
        }
    </style>
</head>
<body>
    <!-- todulist 第一版 -->
    <!-- 先写静态页面 -->
    <!-- 首选，我们的选择项应该是数组循环出来的 -->
    <!-- 双向绑定input框 -->
    <!-- 将input框里打值放进数组里面 -->
    <!-- 写一个方法 -->
    <!-- 将数组声明成复杂数据类型 -->
    <!-- 如果是已完成那么状态就应该为true 为true就应该有这个css的样式 -->
    <!-- 三目运算符 动态绑定class 如果有就给类名 如果没有 class就为空 -->
    <!-- 写一个点击事件来改变li的状态值 -->
    <!-- 我们要告诉代码，我们改变的是哪一个的状态 所以需要把index索引值传给我们的函数 -->
    <!-- 添加的数据也应该是复杂数据类型 -->
    <!-- 因为我们按钮也有状态 所以声明成复杂类型的数组 通过点击改变它的状态 -->
    <!-- 如果按钮的状态为true  则拥有这个样式 -->
    <!-- 给按钮点击事件 点击谁 谁有这个样式 -->
    <!-- 点击的时候我们同样要知道我们点击的是哪一个按钮 所以依然需要传入index索引值 -->
    <!-- 每一次点击按钮的时候，应该把所有的按钮状态都重置掉 -->
    <!-- 再把我们想要改的那个值改为true -->
    <!-- 我们要知道我们现在按钮到底是什么状态 -->
    <!-- 我们要在data里面声明一个东西把状态装起来 -->
    <!-- 我们给li一个v-show来判断这个li是否显示 -->
    <!-- 首先我们要判断是否是全部展示 -->
    <div id="app">
        <h1>todolist_vue版本</h1>
        <div>
            <label for="">
                <input type="text" v-model="inputData">
            </label>
            <button @click="add">添加</button>
        </div>
        <ul>
            <li 
                v-for="(item, index) in list" 
                :key="index" 
                :class="item.statu ? 'finished' : '' "
                @click="changeStatus(index)"
                v-show="btnStatus === 'all' ? true : btnStatus === 'finished' ? item.statu : !item.statu "
                >
                {{ item.name }}
            </li>
        </ul>
        <div>
            <button 
                v-for="(item,index) in btnList" 
                :key="index" 
                :class="item.btnStatu ? 'btnTrue' : ''"
                @click="changeBtn(index)"
                >
                {{ item.btnName }}
            </button>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    // list:['吃饭','睡觉','打发发'],
                    list:[
                        {
                            name:'吃饭',
                            statu:true
                        },
                        {
                            name:'睡觉',
                            statu:false
                        },
                        {
                            name:'打发发',
                            statu:false
                        },
                    ],
                    inputData:'',
                    btnList:[
                        {
                            btnName:'全部',
                            btnStatu:true
                        },
                        {
                            btnName:'已完成',
                            btnStatu:false 
                        },
                        {
                            btnName:'未完成',
                            btnStatu:false   
                        }
                    ],
                    btnStatus:'all' //all-全部 finished-已完成 unfinished-未完成
                }
            },
            // 写方法的地方
            methods:{
                add(){
                    if(this.inputData.length > 0){
                        this.list.push({
                            name:this.inputData,
                            statu:false
                        })
                    }
                    this.inputData = ''
                },
                changeStatus(i){
                    this.list[i].statu = !this.list[i].statu
                },
                changeBtn(i){
                    // i=0 全部(all) i=1 已完成(finished) i=2 未完成(unfinished)
                    // this.btnList.map(item => item.btnStatu = false)
                    for(let j = 0 ; j < this.btnList.length ; j++){
                        this.btnList[j].btnStatu = false
                    }
                    if(i === 0){
                        this.btnStatus = 'all'
                    }else if(i === 1){
                        this.btnStatus = 'finished'
                    }else{
                        this.btnStatus = 'unfinished'
                    }
                    this.btnList[i].btnStatu = true
                    console.log(this.btnStatus)
                }
            }
        })
    </script>
</body>
</html>